<template>
  <div>
    <div class="box">
      <div class="topBar">
        <el-form
          ref="headerSearchForm"
          :model="headerSearchForm"
          :inline="true"
          label-width="150px"
        >
          <el-form-item label="客户类型：" prop="custType">
            <el-select v-model="headerSearchForm.custType" clearable placeholder="请选择">
              <el-option
                v-for="item in custTypeList"
                :key="item.dictCode"
                :label="item.dictName"
                :value="item.dictCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="客户名称：" prop="custName">
            <el-input v-model="headerSearchForm.custName" clearable placeholder="请输入">
            </el-input>
          </el-form-item>
          <el-form-item label="主证件类型：" prop="idType">
            <el-select v-model="headerSearchForm.idType" clearable placeholder="请选择">
              <el-option
                v-for="item in idTypeList"
                :key="item.dictCode"
                :label="item.dictName"
                :value="item.dictCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="主证件号码：" prop="idNumber">
            <el-input v-model="headerSearchForm.idNumber" placeholder="请输入">
            </el-input>
          </el-form-item>
          <el-form-item label="客户号：" prop="custNumber">
            <el-input v-model="headerSearchForm.custNumber" placeholder="请输入">
            </el-input>
          </el-form-item>

          <el-form-item label="同业属性：" prop="ibankProp">
            <el-select
              clearable
              v-model="headerSearchForm.ibankProp"
              placeholder="请选择"
            >
              <el-option
                v-for="item in ibankPropList"
                :key="item.dictCode"
                :label="item.dictName"
                :value="item.dictCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="客户状态：" prop="custStatus">
            <el-select
              clearable
              v-model="headerSearchForm.custStatus"
              placeholder="请选择"
            >
              <el-option
                v-for="item in custStatusList"
                :key="item.dictCode"
                :label="item.dictName"
                :value="item.dictCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="注册登记国家：" prop="regCountry">
            <el-select
              clearable
              v-model="headerSearchForm.regCountry"
              placeholder="请选择"
            >
              <el-option
                v-for="item in regCountryList"
                :key="item.dictCode"
                :label="item.dictName"
                :value="item.dictCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建渠道：" prop="creationCh">
            <el-select
              clearable
              v-model="headerSearchForm.creationCh"
              placeholder="请选择"
            >
              <el-option
                v-for="item in creationChList"
                :key="item.dictCode"
                :label="item.dictName"
                :value="item.dictCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <div style="margin: 10px 0px">
            <el-row>
              <el-col :span="16" style="text-align: left">
                <el-button v-if="!addFlag" type="primary" class="btn" @click="handleAdd"
                  >新增</el-button
                >
                <!-- <el-button
                  v-if="!addFlag"
                  type="primary"
                  class="btn"
                  @click="dialogVisible = true"
                  >批量新增</el-button
                > -->
              </el-col>
              <el-col :span="8" style="float: right; text-align: right">
                <el-button type="primary" @click="getData" class="btn">查询</el-button>
                <el-button type="primary" @click="resetFrom" class="btn">重置</el-button>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
      <div class="bottomInfo">
        <div class="con-form" v-if="addFlag">
          <div class="top_title">
            <span class="title">同业客户信息</span>
            <el-button type="primary" size="mini" class="btn" @click="cancelAdd"
              >返回</el-button
            >
          </div>
          <el-form
            ref="queryForm"
            :model="queryForm"
            :rules="queryRules"
            label-width="190px"
          >
            <el-form-item label="客户类型：" prop="custType">
              <el-select
                :disabled="title == '详情'"
                v-model="queryForm.custType"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in custTypeList"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="创建渠道：" prop="creationCh">
              <el-select
                clearable
                :disabled="title == '详情'"
                v-model="queryForm.creationCh"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in creationChList"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="客户全称：" prop="custName">
              <el-input
                :disabled="title == '详情'"
                v-model="queryForm.custName"
                placeholder="请输入"
                @blur="changecustName"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="客户英文名称：" prop="custNameEn">
              <el-input
                :disabled="title == '详情'"
                v-model="queryForm.custNameEn"
                placeholder="请输入"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="主证件类型：" prop="idType">
              <el-select
                clearable
                :disabled="title == '详情'"
                v-model="queryForm.idType"
                placeholder="请选择"
                @change="idTypeChange"
              >
                <el-option
                  v-for="item in idTypeList"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="主证件号码：" prop="idNumber">
              <el-input v-model="queryForm.idNumber" placeholder="请输入"> </el-input>
            </el-form-item>
            <el-form-item label="注册登记国家：" prop="regCountry">
              <el-select
                clearable
                :disabled="title == '详情'"
                filterable
                v-model="queryForm.regCountry"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in regCountryList"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="同业属性：" prop="ibankProp">
              <el-select
                clearable
                :disabled="title == '详情'"
                filterable
                v-model="queryForm.ibankProp"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in ibankPropList"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="国民经济行业类型(门类)：" prop="indCat">
              <el-select
                clearable
                :disabled="title == '详情'"
                v-model="queryForm.indCat"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in indCatList"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="国民经济行业类型(大类)：" prop="indClass">
              <el-select
                clearable
                :disabled="title == '详情'"
                v-model="queryForm.indClass"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in indClassList"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="客户状态：" prop="custStatus">
              <el-select
                clearable
                v-model="queryForm.custStatus"
                :disabled="title == '详情'"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in custStatusList"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="内部交易对手：" prop="entityCode">
              <el-select
                clearable
                v-model="queryForm.entityCode"
                :disabled="title == '详情'"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in counterpartyList"
                  :key="item.entityCode"
                  :label="item.entityShortName"
                  :value="item.entityCode"
                >
                </el-option>
              </el-select>
              <el-button
                style="margin-left: 20px"
                type="primary"
                size="small"
                class="btn"
                :disabled="title == '详情'"
                @click="getEntityCode()"
                >获取</el-button
              >
            </el-form-item>
            <div class="top_title" style="margin-top: 30px">
              <span class="title">辅证件信息</span>
              <el-button
                type="primary"
                size="mini"
                class="btn"
                @click="addAusd"
                :disabled="title == '详情'"
                >新增</el-button
              >
            </div>
            <div v-for="(item, index) in queryForm.auxDocs" :key="index">
              <el-form-item label="辅证件类型：" prop="auxDocType">
                <div>
                  <el-select
                    clearable
                    @change="changeAuxDocType($event, scope.$index)"
                    v-model="queryForm.auxDocs[index]['auxDocType']"
                    placeholder="请选择"
                    :disabled="title == '详情'"
                  >
                    <el-option
                      v-for="item in idTypeList"
                      :key="item.dictCode"
                      :label="item.dictName"
                      :value="item.dictCode"
                    >
                    </el-option>
                  </el-select>
                  <el-button
                    style="margin-left: 20px"
                    type="primary"
                    size="small"
                    class="btn"
                    :disabled="title == '详情'"
                    @click="delauxd(index)"
                    >删除</el-button
                  >
                </div>
              </el-form-item>
              <el-form-item label="辅证件号码：" prop="auxDocNum">
                <el-input
                  @blur="changeAuxDocNum(queryForm.auxDocs[index]['auxDocNum'], index)"
                  :disabled="title == '详情'"
                  v-model="queryForm.auxDocs[index]['auxDocNum']"
                  placeholder="请输入"
                >
                </el-input>
              </el-form-item>
            </div>
            <div class="top_title" style="margin-top: 30px">
              <span :disabled="title == '详情'" class="title">上级主管单位信息</span>
            </div>
            <el-form-item label="上级主管单位客户号：" prop="supCustNumber">
              <!-- <div style="display: flex;"> -->
              <el-input
                style="width: auto"
                :disabled="title == '详情'"
                v-model="queryForm.supCustNumber"
                placeholder="请输入"
              >
              </el-input>
              <el-button
                style="margin-left: 20px"
                type="primary"
                size="small"
                class="btn"
                :disabled="title == '详情'"
                @click="getTopDetail('supCustNumber')"
                >获取</el-button
              >
              <!-- </div> -->
            </el-form-item>
            <el-form-item label="上级主管单位名称：" prop="supName">
              <el-input
                style="width: auto"
                :disabled="title == '详情'"
                v-model="queryForm.supName"
                placeholder="请输入"
              >
              </el-input>
              <el-button
                style="margin-left: 20px"
                type="primary"
                size="small"
                class="btn"
                :disabled="title == '详情'"
                @click="getTopDetail('supName')"
                >获取</el-button
              >
            </el-form-item>
            <el-form-item label="上级主管单位证件类型：" prop="supIdType">
              <el-select
                v-model="queryForm.supIdType"
                placeholder="请选择"
                :disabled="title == '详情'"
              >
                <el-option
                  v-for="item in idTypeList"
                  :key="item.dictCode"
                  :label="item.dictName"
                  :value="item.dictCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="上级主管单位主证件号码：" prop="supIdNumber">
              <el-input
                style="width: auto"
                :disabled="title == '详情'"
                v-model="queryForm.supIdNumber"
                placeholder="请输入"
              >
              </el-input>
              <el-button
                style="margin-left: 20px"
                type="primary"
                size="small"
                class="btn"
                :disabled="title == '详情'"
                @click="getTopDetail('supIdNumber')"
                >获取</el-button
              >
            </el-form-item>
            <div class="con-btn">
              <el-button type="primary" @click="save" class="btn" v-if="title == '新增'"
                >保存</el-button
              >
              <el-button
                type="primary"
                @click="wanderAbout"
                class="btn"
                v-if="title != '详情'"
                >流转</el-button
              >
            </div>
          </el-form>
        </div>
        <div class="tab_body" v-if="!addFlag">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号"> </el-table-column>
            <el-table-column prop="custNumber" label="客户号"> </el-table-column>
            <el-table-column prop="custType" label="客户类型"> </el-table-column>
            <el-table-column prop="custName" label="客户名称"> </el-table-column>
            <el-table-column prop="idType" label="主证件类型"> </el-table-column>
            <el-table-column prop="idNumber" label="主证件号码"> </el-table-column>
            <el-table-column prop="custStatus" label="客户状态"> </el-table-column>
            <el-table-column prop="ibankProp" label="同业属性"> </el-table-column>
            <el-table-column prop="regCountry" label="注册登记国家"> </el-table-column>
            <el-table-column prop="creationCh" label="创建渠道"> </el-table-column>
            <el-table-column prop="" label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="handleEdit(scope.$index, scope.row)"
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="handleDetail(scope.$index, scope.row)"
                  >详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="pageFn"
            :current-page="pageNum"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      title="批量新增"
      :visible.sync="dialogVisible"
      width="300px"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="dialogClose"
    >
      <div class="uplad_demo">
        <div class="upload_temp">
          <span class="left">下载模板：</span>
          <span class="right">模版文件.csv</span>
        </div>
        <div class="upload_btn">
          <span class="left">上传文件：</span>
          <span class="right">
            <el-upload
              :multiple="false"
              :on-success="onUploadSuccess"
              :action="base_URL + 'analysis/creditMonitor/entityLimit/batchQuery'"
              class="upload-demo"
              :headers="uploadHeaders"
            >
              <el-button size="mini" type="primary" class="btn">点击上传</el-button>
            </el-upload>
          </span>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      title="选择交易对手"
      :visible.sync="entityvisible"
      width="300px"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="pydialogClose"
    >
      <div class="uplad_demo">
        <div class="upload_temp">
          <span class="left">下载模板：</span>
          <span class="right">模版文件.csv</span>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      width="1000px"
      title="选择交易对手"
      :visible.sync="entityvisible"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <div class="common-table-panel">
        <div class="comon-container table-panel">
          <div class="con-header">
            <div style="padding: 20px 0px">
              <!-- <el-row> -->
              <!-- <el-col :span="16"> -->
              <el-form ref="pyForm" :model="pyForm" :inline="true" label-width="120px">
                <el-form-item label="信用代码：" prop="entityUscc">
                  <el-input v-model="pyForm.entityUscc" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="中文简称：" prop="entityShortName">
                  <el-input
                    v-model="pyForm.entityShortName"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
                <el-form-item label="英文简称：" prop="entityEnShortName">
                  <el-input
                    v-model="pyForm.entityEnShortName"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-form>
              <!-- </el-col> -->
              <div style="float: right">
                <el-button class="btn" type="info" @click="getPtyEntityInfoList(1)"
                  >查询</el-button
                >
                <el-button type="info" class="btn" @click="pyresetForm()">重置</el-button>
              </div>
              <!-- </el-row> -->
            </div>
          </div>
          <div class="con-main" style="margin-top: 15px">
            <div class="table-panel">
              <div ref="tableBody" class="table-body">
                <el-table
                  @selection-change="handleSelectionChange"
                  :data="pyTableData"
                  stripe
                  style="width: 100%"
                  height="500px"
                >
                  <el-table-column type="selection" width="55"> </el-table-column>
                  <el-table-column type="index" label="序号" width="80px">
                  </el-table-column>
                  <el-table-column label="实体代码" prop="entityCode"></el-table-column>
                  <el-table-column label="信用代码" prop="entityUscc"></el-table-column>
                  <el-table-column
                    label="中文简称"
                    prop="entityShortName"
                  ></el-table-column>
                  <el-table-column
                    label="英文简称"
                    prop="entityEnShortName"
                  ></el-table-column>
                </el-table>
              </div>
            </div>
            <div class="con-footer pagination">
              <!-- <Pagination
                :total="pyTotal"
                :page.sync="pyNum"
                :limit.sync="pySize"
              /> -->
              <el-pagination
                background
                @size-change="handleSizeChange1"
                @current-change="pageFn1"
                :current-page="pyNum"
                :page-size="pySize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pyTotal"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="entityvisible = false" class="btn">取消</el-button>
        <el-button type="primary" @click="handerpyList()" class="btn">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { GetDictByCode, getDictItems } from "@/api/common";
import {
  getList,
  saveCustInfo,
  processCustInfo,
  updateCustInfo,
  getcounterparty,
  getPtyEntityInfo,
} from "@/api/addCustomers";
export default {
  name: "addCustomers",

  data() {
    return {
      entityvisible: false,
      tableData: [],
      addFlag: false,
      dialogVisible: false,
      base_URL: "",
      title: "",
      pageNum: 1,
      pageSize: 10,
      total: 0,
      headerSearchForm: {
        custType: "", //客户类型
        custName: "", // 客户名称
        idType: "", // 主证件类型
        idNumber: "", // 主证件号码
        custNumber: "", // 客户号
        ibankProp: "", // 同业属性
        custStatus: "", // 客户状态
        regCountry: "", // 注册登记国家
        creationCh: "", //  创建渠道
      },
      queryForm: {
        custType: "法人户",
        creationCh: "",
        custName: "",
        custNameEn: "",
        idType: "",
        idNumber: "",
        regCountry: "",
        ibankProp: "",
        indCat: "",
        indClass: "",
        custStatus: "",
        supCustNumber: "",
        supName: "",
        supIdType: "",
        indCsupIdNumberat: "",
        entityCode: "",
        auxDocs: [
          {
            auxDocType: "",
            auxDocNum: "",
          },
        ],
      },
      creationChList: [], //创建渠道
      regCountryList: [], //注册登记国家
      ibankPropList: [], //同业属性
      idTypeList: [], //证件类型
      custTypeList: [
        { dictCode: "法人户", dictName: "法人户" },
        { dictCode: "产品户", dictName: "产品户" },
      ], //客户类型
      custStatusList: [
        { dictCode: "有效", dictName: "有效" },
        { dictCode: "无效", dictName: "无效" },
      ], //客户状态
      indCatList: [], //经济行业类型-门类
      indClassList: [], //经济行业类型-大类
      queryRules: {
        custName: [
          { required: true, message: "请输入", trigger: "blur" },
          { validator: this.validateName, trigger: "blur" },
        ],
        creationCh: [{ required: true, message: "请输入", trigger: "change" }],
        custType: [{ required: true, message: "请输入", trigger: "change" }],
        idType: [{ required: true, message: "请输入", trigger: "change" }],
        regCountry: [{ required: true, message: "请输入", trigger: "change" }],
        ibankProp: [{ required: true, message: "请输入", trigger: "change" }],
        custStatus: [{ required: true, message: "请输入", trigger: "change" }],
        indCat: [{ required: true, message: "请输入", trigger: "change" }],
        indClass: [{ required: true, message: "请输入", trigger: "change" }],
      },
      uploadHeaders: {},
      counterpartyList: [],
      pyForm: {
        entityUscc: "",
        entityShortName: "",
        entityEnShortName: "",
      },
      pyNum: 1,
      pySize: 10,
      pyTotal: 0,
      pyTableData: [],
      selectData: [],
    };
  },

  async mounted() {
    // this.init();
    this.getData();
    this.getCode("CREATE_CHANNELS", "creationChList");
    this.getCode("ID_TYPE", "idTypeList");
    this.getCode("INDUSTRY_TYPE", "indClassList");
    this.getCode("INTERINDUSTRY_ATTRIBUTES", "ibankPropList");
    this.getCode("PRODUCT_ID_TYPE", "productIdTypeList");
    this.getCode("COUNTRY_CODE", "regCountryList");
    this.getCode("INDUSTRY_ECONOMIC_CATEGORIES", "indCatList");
    this.getPtyEntityInfoList();
    // this.getcounterpartyList();
  },

  methods: {
    handleSelectionChange(row) {
      this.selectData = row;
    },
    handerpyList() {
      if (this.selectData.length > 0) {
        console.log(this.selectData);
        this.counterpartyList = JSON.parse(JSON.stringify(this.selectData));
        this.entityvisible = false;
      } else {
        this.$message.warning("请选择一条数据");
      }
    },
    pydialogClose() {
      this.$refs.pyForm.resetFields();
    },
    async getPtyEntityInfoList(num) {
      try {
        let params = {
          pageNum: this.pyNum,
          pageSize: this.pySize,
          ...this.pyForm,
        };
        params.pageNum = num ? num : this.pyNum;
        const { data } = await getPtyEntityInfo(params);
        this.pyTableData = data.records;
        this.pyTotal = data.total;
        console.log(data);
      } catch (error) {
        this.pyTableData = [];
      }
    },
    pyresetForm() {
      this.$refs.pyForm.resetFields();
      this.getPtyEntityInfoList();
    },
    idTypeChange(val) {
      // console.log(val);
      if (val == "中华人民共和国组织机构代码证" && this.queryForm.auxDocs.length > 0) {
        if (
          this.queryForm.auxDocs.length == 1 &&
          this.queryForm.auxDocs[0].auxDocType == ""
        ) {
          this.queryForm.auxDocs[0].auxDocType = "统一社会信用代码";
        }
        this.queryForm.auxDocs.forEach((item) => {
          if (
            item.auxDocType == "统一社会信用代码" &&
            this.queryForm.custName != "" &&
            item.auxDocNum != ""
          ) {
            let params = {
              auxDocNum: item.auxDocNum,
              custName: this.queryForm.custName,
            };
            this.getcounterpartyList(params);
          }
        });
      }
    },
    changeAuxDocType(val, index) {
      if (
        val == "统一社会信用代码" &&
        this.queryForm.idType == "中华人民共和国组织机构代码证" &&
        this.queryForm.custName != "" &&
        this.queryForm.auxDocs[index].auxDocNum != ""
      ) {
        let params = {
          auxDocNum: this.queryForm.auxDocs[index].auxDocNum,
          custName: this.queryForm.custName,
        };
        this.getcounterpartyList(params);
      }
    },
    changeAuxDocNum(val, index) {
      if (
        this.queryForm.auxDocs[index].auxDocType == "统一社会信用代码" &&
        this.queryForm.idType == "中华人民共和国组织机构代码证" &&
        this.queryForm.custName != "" &&
        val != ""
      ) {
        let params = {
          auxDocNum: val,
          custName: this.queryForm.custName,
        };
        this.getcounterpartyList(params);
      }
    },
    changecustName() {
      if (
        this.queryForm.idType == "中华人民共和国组织机构代码证" &&
        this.queryForm.custName != ""
      ) {
        let index = this.queryForm.auxDocs.findIndex(
          (item) => item.auxDocType == "统一社会信用代码"
        );
        if (index > -1 && this.queryForm.auxDocs[index].auxDocNum != "") {
          let params = {
            auxDocNum: this.queryForm.auxDocs[index].auxDocNum,
            custName: this.queryForm.custName,
          };
          this.getcounterpartyList(params);
        }
      }
    },
    dialogClose() {},
    async getcounterpartyList(params) {
      const { data } = await getcounterparty(params);
      if (data.length > 0) {
        this.counterpartyList = [];
        data.forEach((item) => {
          this.counterpartyList.push({
            entityCode: item,
            entityShortName: item,
          });
        });
      }else {
        this.counterpartyList = [];
      }
    },
    onUploadSuccess() {},
    resetqueryForm() {
      this.queryForm = {
        custType: "法人户",
        creationCh: "",
        custName: "",
        custNameEn: "",
        idType: "",
        idNumber: "",
        regCountry: "",
        ibankProp: "",
        indCat: "",
        entityCode: "",
        indClass: "",
        custStatus: "",
        supCustNumber: "",
        supName: "",
        supIdType: "",
        indCsupIdNumberat: "",
        auxDocs: [
          {
            auxDocType: "",
            auxDocNum: "",
          },
        ],
      };
    },
    async getTopDetail(label) {
      const val = this.queryForm[label];
      let params = {};
      if (!val || val == "") {
        this.$message.warning("请输入内容");
        return;
      }
      if (label == "supCustNumber") {
        params = {
          supCustNumber: val,
        };
      }
      if (label == "supName") {
        params = {
          supName: val,
        };
      }
      if (label == "supIdNumber") {
        params = {
          supIdNumber: val,
        };
      }
      (params.pageNum = 1), (params.pageSize = 10);
      const { data } = await getList(params);
      console.log(data, "data");
      if (data && data.records.length > 0) {
        let row = data.records[0];
        console.log(row, "row123123");
        this.queryForm.supCustNumber = row.custNumber;
        this.queryForm.supName = row.custName;
        this.queryForm.supIdType = row.idType;
        this.queryForm.supIdNumber = row.idNumber;
      }
    },
    handleEdit(index, row) {
      this.title = "编辑";
      this.queryForm = { ...this.tableData[index] };
      this.addFlag = true;
    },
    handleDetail(index, row) {
      this.title = "详情";
      this.queryForm = { ...this.tableData[index] };
      this.addFlag = true;
    },
    addAusd() {
      this.queryForm.auxDocs.push({
        auxDocType: "",
        auxDocNum: "",
      });
    },
    async getData() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.headerSearchForm,
      };
      const { data } = await getList(params);
      console.log(data, "999");
      if (data) {
        this.tableData = data.records;
        this.total = data.total;
      }
      // console.log(res);
    },
    resetFrom() {
      this.$refs.headerSearchForm.resetFields();
      this.getData();
    },
    getEntityCode() {
      this.entityvisible = true;
    },
    // 获取字典
    async getCode(typeGroupCode, optName) {
      try {
        const { data } = await GetDictByCode({
          typeGroupcode: typeGroupCode,
        });
        this.formatterCode(typeGroupCode, data.dictData, optName);
      } catch (error) {}
    },
    formatterCode(typeGroupCode, list, optName) {
      const options = [];
      this[optName] = [];
      if (list && list.length > 0) {
        list.forEach((element) => {
          options.push({
            dictName: element.dictName,
            dictCode: element.dictCode,
          });
        });
        this[optName] = options;
        // console.log(this.creationChList,'2222');
      }
    },
    handleAdd() {
      this.addFlag = true;
      this.title = "新增";
    },
    cancelAdd() {
      this.addFlag = false;
      this.resetqueryForm();
    },
    save() {
      try {
        this.$refs.queryForm.validate(async (valid) => {
          if (!valid) {
            return;
          }
          let params = {
            ...this.queryForm,
          };
          const res = await saveCustInfo(params);
          if (res && res.code === 200) {
            this.$message.success(res.message || "操作成功");
            this.addFlag = false;
            this.resetqueryForm();
            this.getData();
          } else {
            this.$message.success(res.message || "操作失败");
          }
        });
      } catch (error) {
        console.log(error);
      }
    },
    wanderAbout() {
      try {
        this.$refs.queryForm.validate(async (valid) => {
          if (!valid) {
            return;
          }
          let params = {
            ...this.queryForm,
          };
          if (this.title === "新增") {
            const res = await processCustInfo(params);
            if (res && res.code === 200) {
              this.$message.success(res.message || "操作成功");
              this.addFlag = false;
              this.resetqueryForm();
              this.getData();
            } else {
              this.$message.success(res.message || "操作失败");
              // this.addFlag = false;
            }
          }
          if (this.title === "编辑") {
            const res = await updateCustInfo(params);
            if (res && res.code === 200) {
              this.$message.success(res.message || "操作成功");
              this.addFlag = false;
              this.resetqueryForm();
              this.getData();
            } else {
              this.$message.success(res.message || "操作失败");
              // this.addFlag = false;
            }
          }
        });
      } catch (error) {
        console.log(error);
      }
    },
    delauxd(index) {
      this.queryForm.auxDocs.splice(index, 1);
    },
    validateName(rule, value, callback) {
      // 前后不应有空格符、制表符、回车符、换行符
      if (/^\s+|\s+$/.test(value)) {
        return callback(new Error("名称不能以空格开头或结尾"));
      }
      // 仅为单字节构成时，名称中间可含空格
      if (/^\w+(\s+\w+)*$/.test(value)) {
        return callback();
      }
      // 名称含双字节字符，中间不可含空格
      if (/[\u4E00-\u9FA5]/.test(value) && /\s/.test(value)) {
        return callback(new Error("名称含有双字节字符，中间不可含空格"));
      }
      // 长度应超过2个（含）中文字符或4个（含）英文字符
      if ((value.match(/[\u4E00-\u9FA5]/g) || []).length < 2 && value.length < 4) {
        return callback(new Error("名称长度应超过2个（含）中文字符或4个（含）英文字符"));
      }
      callback();
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.getData();
    },
    pageFn(num) {
      this.pageNum = num;
      this.getData();
    },
    handleSizeChange1(size) {
      this.pySize = size;
      this.getPtyEntityInfoList();
    },
    pageFn1(num) {
      this.pyNum = num;
      this.getPtyEntityInfoList();
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
  height: 100%;
  .topBar {
    background-color: #262d47;
    margin-bottom: 10px;
    padding: 20px 20px;
    padding-bottom: 10px;
  }
  .bottomInfo {
    background-color: #262d47;
    padding: 10px 20px 30px 20px;
    display: flex;
    flex: 1;
    flex-direction: column;
  }
  .top_title {
    width: 100%;
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #354060;
    margin-bottom: 20px;
    .title {
      color: #fff;
      font-size: 14px;
      display: inline-block;
      margin-right: 20px;
    }
  }
  .con-form {
    .el-form-item {
      margin-bottom: 25px;
    }
  }
  .el-pagination {
    text-align: right;
    position: absolute;
    right: 30px;
    bottom: 50px;
  }
}
.uplad_demo {
  padding: 20px 0px;
  .upload_temp {
    display: flex;
    .left {
      display: inline-block;
    }
    .right {
      display: inline-block;
      margin-left: 10px;
      color: #2090eb;
      text-decoration: underline;
      cursor: pointer;
    }
  }
  .upload_btn {
    display: flex;
    margin-top: 20px;
    align-items: center;
    .right {
      margin-left: 10px;
    }
  }
}
</style>
